<#include "../common/header.htm">
<div class="content-wrapper">
    <section class="content" id="exportListForm">
            <div class="box">
                <div class="box-header">
                    <div class="row RowSearchWork">
                        <div class="col-sm-12">
                            <div class="form-inline">
                                <div class="form-group" style="margin-left: 20px;">
                                    <label>服务号码或对方号码</label>
                                    <input name="number" v-model="number" type="text" class="form-control"  placeholder="请输入号码" style="display: inline-block;width: 180px;margin-left: 5px;" />
                                </div>
                                <div class="form-group" style="margin-left: 20px;">
                                    <input type="button" class="btn btn-primary" @click="search()" value="分析" />
                                    <input type="button" class="btn btn-default" @click="clear()" value="重置" />
                                    <input type="button" class="btn btn-primary" onclick="datalog.billExport();" value="导出" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="box-body">
                    <el-table
                            row-class-name="tableRow"
                            ref="multipleTable"
                            :data="page.rows"
                            tooltip-effect="dark"
                           >
                        <el-table-column
                                width="70"
                                type="index"
                                label="序号">
                        </el-table-column>
                        <el-table-column
                                width="150"
                                label="服务号码"
                                >
                            <template slot-scope="scope">
                                <span :title="scope.row.serviceNumber" class="overflow">{{ scope.row.serviceNumber }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="150"
                                label="服务号码用户信息"
                                >
                            <template slot-scope="scope">
                                <span :title="scope.row.serviceUserInformation" class="overflow">{{ scope.row.serviceUserInformation }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="150"
                                label="服务号码归属地">
                            <template slot-scope="scope">
                                <span :title="scope.row.serviceLocation" class="overflow">{{ scope.row.serviceLocation }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="200"
                                label="开始时间">
                            <template slot-scope="scope" v-if="scope.row.startingTime">
                                <span >{{ scope.row.startingTime | formatDate  }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="150"
                                prop="partyNumber"
                                label="对方号码">
                        </el-table-column>
                        <el-table-column
                                width="220"
                                label="对方号码用户信息">
                            <template slot-scope="scope">
                                <span :title="scope.row.partyUserInformation" class="overflow">{{ scope.row.partyUserInformation }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="220"
                                label="对方号码归属地">
                            <template slot-scope="scope">
                                <span :title="scope.row.partyLocation" class="overflow">{{ scope.row.partyLocation }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                width="150"
                                prop="talkTime"
                                label="通话时长">
                        </el-table-column>
                        <el-table-column
                                width="150"
                                label="服务基站">
                            <template slot-scope="scope">
                                <span :title="scope.row.baseStation" class="overflow">{{ scope.row.baseStation }}</span>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-pagination
                            :current-page.sync="currentPage"
                            :page-size="10"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            layout="total, prev, pager, next"
                            :total="page.total"
                            style="padding: 2px 20px;border-top:0;">
                    </el-pagination>
                </div>
    </div>
</section>
</div>
<script>
	var caseId=parent.caseId;
    var datalog = {
        query: function () {
            var number = $("input[name='number']").val().trim();
            var query="?";
            if(number){
                query+="number="+number+"&"
            }
            if(xx.uuid){
                query+="casemanageId="+xx.uuid+"&"
            }
            query=query.substr(0,query.length-1).trim();
            window.location.href="${ctx}/phone/record/export"+query
        },
        billExport: function () {
            var number = $("input[name='number']").val().trim();
            var query="?casemanageId="+caseId+"&";
            if(number){
                query+="number="+number+"&"
            }
//            if(xx.uuid){
//                query+="casemanageId="+xx.uuid+"&"
//            }
            query=query.substr(0,query.length-1).trim();
            window.location.href="${ctx}/phone/record/createExcel"+query

        },
        clear: function () {
            $("input[name='number']").val("");
            xx.uuid="";
        },
        todataLog: function () {
            window.location.href = "${ctx}/datalog/importlist";
        }
    }

var xx=new Vue({
    el: '#exportListForm',
    data:{
        uuidlist: [],
        uuid:"",
        page:"",
        currentPage:1,
        size:10,
        number:""
    },
    created:function () {
//        this.getUuidList();
//        if(uid){
//            this.uuid=uid;
//        };
        this.getlist();

    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
        },
    },
    methods:{
        getUuidList() {
            request({
                url: 'casemanage/uuid/',
                method: 'get'
            }).then(result=>{
                this.uuidlist=result.data.data;
                this.uuidlist.unshift({case_name:"请选择",case_uuid:""})
            })
        },
        handleSizeChange(val) {
            console.log("每页"+val+"条")
        },
        handleCurrentChange(val) {
            console.log("当前页："+val)
            this.currentPage=val;
            this.getlist()
        },
        search(){
            this.getlist();
        },
        clear(){
            this.number="";
            this.uuid="";
        },
        getlist(){
            request({
                url: 'phone/record/search/'+(this.currentPage-1)+'/'+this.size,
                method: 'post',
                data: {
                    'number':this.number,
                    'casemanageId':caseId
                }
            }).then(result=>{
                this.page=result.data.data;
            })
        },
    }
})
</script>
<style>
    table.el-table__body {
        width: 100%!important;
    }
    table.el-table__header{
        width: 100%!important;
    }
    .el-table.el-table--fit.el-table--enable-row-hover {
        margin-top: 5px;
        margin-left: 10px;
        width: 99%;
        margin-bottom: 8px;
    }
    label {
        color: #6f7689;
        font-size: 13px;
        font-weight: 400;
    }
    .box-header .form-group{
        margin-right: 15px;
    }
    .btn-primary:active:focus{
        background-color: #4695ed;
        border-color: #4695ed;
    }
    .btn-primary{
        background-color:#4695ed;
        border-color:#4695ed;
        width: 70px;
    }
    input.btn.btn-default {
        width: 70px;
    }
    .btn-primary:hover, .btn-primary:active, .btn-primary.hover{
        background: #61a8f5;
        border-color: #61a8f5;
    }
    .btn-primary.focus, .btn-primary:focus{
        background-color:#4695ed;
        border-color:#4695ed;
    }
    input{
        margin-right: 10px;
    }
    .form-control{
        border-radius:4px;
        font-size: 12px;
        border-color: #e4e4e4;
    }
    .input-group .form-control:first-child{
        border-top-right-radius:4px;
        border-bottom-right-radius: 4px;
    }
    .form-control:focus{
        border-color:#4695ed;
    }
    .form-control:hover{
        border-color:#4695ed;
    }
   	body{
		padding:10px;
	}
</style>

